<template>
	<div class="navigation">
		<div class="mini-header">
			<div class="mini-header-content">
				<div style="margin-top: 5px;">
					<ul class="nav-link-ul">
						<li class="nav-link-item">
							<Icon type="md-home" size="18" color="rgb(255, 92, 124)" />
							<router-link to="Home"><span>主站</span></router-link>  
						</li>
						<li class="nav-link-item">
							<a class="link" href="">
								<Icon type="md-car" size="18" color="rgb(255, 92, 124)"/>
								<span>个人导航</span>
							</a>
						</li>
						<li class="nav-link-item">
							<a class="link" href="/document">
								<Icon type="md-document" size="18" color="rgb(255, 92, 124)"/>
								<span>文档系统</span>
							</a>
						</li>
						<li class="nav-link-item">
							<a class="link" href="https://space.bilibili.com/10836032" target="_blank">
								<Icon type="logo-tux" size="18" color="rgb(255, 92, 124)"/>
								<span>B站</span>
							</a>
						</li>
					</ul>
				</div>
				<div>
					<!-- <Input search enter-button placeholder="请输入你想输入的内容" style="width: 30rem;" /> -->
				</div>
				<div style="margin-right: 30px;">
					<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" />
					<a class="txt" href="">登录</a>
					<a class="txt" href="">注册</a>
				</div>
			</div>
		</div>
	</div>
</template>


<script>
export default {
  name: 'NavHeader',
  props: {
	msg: String
  }
}
</script>

<style scoped>
.nav-link-item a{
	color: #fff;
}

.nav-link-item a:hover{
	color:#57a3f3;
}

.navigation{
  /* background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('../assets/images/nav01.jpg'); */
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), url('https://i.loli.net/2021/08/02/4vKFBSTrGLM13Cu.jpg');
  min-height: 155px;
  background-repeat: no-repeat;
  background-size: cover;
}

.mini-header{
  height: 58px;
  width: 100%;
}

.mini-header-content{
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
}

.nav-link-ul{
  display: flex;
  align-items: center;
  list-style-type:none;
}

.nav-link-item{
  margin-right: 12px;
  text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
  color: #fff;
}

.link{
  color:#fff;
  white-space: nowrap;
}

.link:hover{
	color:#57a3f3;
}

.link svg{
  width: 18px;
  height: 14px;
}

.txt{
	font-size: 18px;
	margin-left: 10px;
	color:#fff;
}

.txt:hover{
	color:#57a3f3;
}

</style>